<script>
import Dialog from '@/views/department/components/Dialog.vue'
import { getDepartmentListAPI, deleteDepartmentAPI } from '@/api/departmentApi'
import { transitionToTreeData, transToTreeData } from '@/utils'

export default {
  name: 'Department',
  components: { Dialog },
  data() {
    return {
      /* el-tree展示数据的结构 */
      defaultProps: {
        //需要显示的字段的名称
        name: 'name',
        // 读取子节点的字段名称
        children: 'children'
      },
      /* 部门列表(树形) */
      depts: [],
      /* 部门列表(平铺) */
      originDepts: [],
      /* 用于控制dialog组件的显示和隐藏 */
      showDialog: false,
      /* dialog组件的标题 */
      dialogTitle: '',
      /* 当前部门的ID */
      id: 0
    }
  },
  methods: {
    /* 获取部门列表的请求函数 */
    async fetchDepartment() {
      try {
        // 调用getDepartmentListAPI()获取部门列表的接口(返回的是一个Promise对象)
        const { data } = await getDepartmentListAPI()
        // 保存原始的部门列表数组(不是平铺的结构)
        this.originDepts = data
        // 保存转换后的树形部门列表数组(树形的结构)
        this.depts = transitionToTreeData(data)
      } catch (e) {
        // 部门列表获取失败
        this.$message.error(e.message)
      }
    },
    /* 用于做添加部门的操作 */
    doAdd(id) {
      // 打开Dialog组件
      this.showDialog = true
      // 记录dialogTitle的标题为'添加部门'
      this.dialogTitle = '添加部门'
      // 记录当前点击的部门id
      this.id = id
    },
    /* 用于做编辑部门的操作 */
    async doEdit(id) {
      // 打开Dialog组件
      this.showDialog = true
      // 记录dialogTitle的标题为'编辑部门'
      this.dialogTitle = '编辑部门'
      // 记录当前点击的部门id
      this.id = id
      //父组件调用子组件的请求函数获取当前部门的详情
      this.$refs.Dialog.findDepartment(id)
    },
    /* 用于做删除部门的操作 */
    async doDelete(id) {
      // 提示用户是否真的要删除一个部门，该函数返回一个Promise(点击确定是：confirm，点击取消是：cancel)
      const confirm = await this.$confirm('此操作将永久删除此部门, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(e => e)
      // 如果点击了取消则return出去，不执行下面的逻辑
      if (confirm === 'cancel') return
      try {
        // 调用deleteDepartmentAPI(id)删除部门的接口函数传入要删除的部门id，该接口函数返回一个Promise对象
        const { message } = await deleteDepartmentAPI(id)
        // 提示用户删除成功
        this.$message.success(message)
        // 调用fetchDepartment()请求函数重新发送请求获取部门列表
        this.fetchDepartment()
      } catch (e) {
        // 删除部门失败 提示用户
        this.$message.error(e.message)
      }
    },
    /* 下拉菜单的command事件(点击菜单项触发的事件回调) */
    handleCommand(command, id) {
      switch (command) {
        case 'add':
          // 添加部门的操作(调用doAdd函数,传入部门ID)
          this.doAdd(id)
          break
        case 'edit':
          // 编辑部门的操作(调用doEdit函数,传入部门ID)
          this.doEdit(id)
          break
        default:
          // 删除部门的操作(调用doDelete函数,传入部门ID)
          this.doDelete(id)
          break
      }
    },
    /*  handleSuccess事件子组件添加部门或者编辑部门成功的自定义事件 */
    handleSuccess() {
      // 关闭弹框
      this.showDialog = false
      // fetchDepartment()接口函数重新发送请求获取部门列表
      this.fetchDepartment()
    }
  },
  created() {
    //组件创建完毕的时候调用fetchDepartment()获取部门列表
    this.fetchDepartment()
  }
}
</script>

<template>
  <div class="department">
    <el-card class="layui-anim layui-anim-scale">
      <!--el-tree树形组件-->
      <el-tree :data="depts" :props="defaultProps" :expand-on-click-node="false" default-expand-all>
        <!--作用域插槽-->
        <template #default="{node,data}">
          <!--行-->
          <el-row type="flex" justify="space-between" align="middle">
            <!--第一列-->
            <el-col :span="20">{{ data.name }}</el-col>
            <!--第二列-->
            <el-col :span="4">
              <!--行-->
              <el-row>
                <!--第一列-->
                <el-col :span="12">
                  <i class="el-icon-user-solid"></i>
                  <el-link type="primary" :underline="false">{{ data.managerName }}</el-link>
                </el-col>
                <!--第二列-->
                <el-col :span="12">
                  <!--下拉菜单-->
                  <el-dropdown @command="handleCommand($event,data.id)">
                    <el-button type="primary" round size="mini">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                    <el-dropdown-menu>
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="delete" v-if="!data.children.length">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      <!--二次封装的el-dialog组件-->
      <Dialog :disable.sync="showDialog" :dialog-title="dialogTitle" :originDepts="originDepts" :pid="id" @handleSuccess="handleSuccess" ref="Dialog"></Dialog>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.department {
  .el-card {
    margin-top: 10px;
  }

  .el-row {
    width: 100%;

    .el-col-12 {
      text-align: left;
      line-height: 40px;
    }
  }

  .el-icon-user-solid {
    margin-right: 10px;
  }

}
</style>
